<template>
    <!-- Background Decoration (Fixed to viewport to serve as app background) -->
    <div class="background-decoration">
        <div class="blob blob-1"></div>
        <div class="blob blob-2"></div>
    </div>

    <!-- Spacer to occupy space in flex layout -->
    <div class="sidebar-spacer"></div>

    <aside class="app-sidebar">
        <!-- Header / Logo -->
        <div class="sidebar-header animate-enter stagger-1">
            <div class="logo-card">
                <div class="logo-content">
                    <div class="logo-text">
                        <span class="app-name">云南省失业数据采集系统</span>
                        <span class="app-edition">Enterprise Edition</span>
                    </div>
                </div>
                <div class="status-badge">
                    <span class="badge-tag">企业端</span>
                    <span class="status-dot"></span>
                    <span class="status-text">在线</span>
                </div>
            </div>
        </div>

        <!-- Navigation -->
        <nav class="sidebar-nav animate-enter stagger-2">
            <div v-for="item in menuItems" :key="item.path" class="nav-item-wrapper">
                <button
                    class="nav-item"
                    :class="{ 'is-active': activePath === item.path }"
                    @click="handleNavigation(item.path)"
                    @mouseenter="hoveredPath = item.path"
                    @mouseleave="hoveredPath = null"
                >
                    <!-- 1. Active Background (Gradient) -->
                    <div
                        class="nav-bg-active"
                        :class="{ 'opacity-100': activePath === item.path }"
                    ></div>

                    <!-- 2. Hover Background -->
                    <div
                        class="nav-bg-hover"
                        :class="{
                            'opacity-100': activePath !== item.path && hoveredPath === item.path,
                        }"
                    ></div>

                    <!-- 3. Content -->
                    <div class="nav-content" :class="{ 'translate-x': activePath === item.path }">
                        <el-icon
                            class="nav-icon"
                            :class="{ 'text-white': activePath === item.path }"
                            :size="20"
                        >
                            <component :is="item.icon" />
                        </el-icon>
                        <span class="nav-label" :class="{ 'text-white': activePath === item.path }">
                            {{ item.label }}
                        </span>
                    </div>

                    <!-- 4. Active Indicator Dot -->
                    <div class="active-dot" :class="{ show: activePath === item.path }"></div>

                    <!-- 5. Active Glow Shadow -->
                    <div class="active-glow" :class="{ show: activePath === item.path }"></div>
                </button>
            </div>
        </nav>

        <!-- Footer / User Profile -->
        <div class="sidebar-footer animate-enter stagger-3">
            <div class="user-card">
                <div class="user-card-header">
                    <span class="section-title">账户信息</span>
                    <button class="logout-btn" @click="handleLogout" title="退出登录">
                        <el-icon>
                            <SwitchButton />
                        </el-icon>
                    </button>
                </div>

                <div class="user-info">
                    <div class="username">{{ username }}</div>
                    <div class="enterprise-info">
                        <el-icon class="ent-icon">
                            <School />
                        </el-icon>
                        <!-- Using School as Building placeholder -->
                        <span class="ent-name" :class="{ loading: loading }">
                            {{ loading ? '正在同步...' : displayEnterpriseName }}
                        </span>
                    </div>
                </div>

                <!-- Decorative Glow for Registered Users -->
                <div v-if="isRegistered" class="user-card-glow"></div>
            </div>
        </div>
    </aside>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { House, Notebook, Edit, Search, Bell, SwitchButton, School } from '@element-plus/icons-vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import axios from 'axios';

const route = useRoute();
const router = useRouter();

// State
const username = ref('');
const enterpriseInfo = ref(null);
const loading = ref(false);
const hoveredPath = ref(null);

// Menu Configuration
const menuItems = [
    { path: '/home', label: '首页', icon: House },
    { path: '/profile', label: '备案信息', icon: Notebook },
    { path: '/report/list', label: '数据填报', icon: Edit },
    { path: '/search', label: '数据查询', icon: Search },
    { path: '/notice/list', label: '通知中心', icon: Bell },
];

// API Client
const apiClient = axios.create({
    baseURL: '/api',
    timeout: 10000,
    withCredentials: true,
    headers: { 'Content-Type': 'application/json' },
});

// Computed
const activePath = computed(() => {
    const path = route.path;
    if (path.startsWith('/report/')) return '/report/list';
    if (path.startsWith('/notice/')) return '/notice/list';
    return path;
});

const displayEnterpriseName = computed(() => {
    if (!enterpriseInfo.value) return '未备案';
    const status = enterpriseInfo.value.status;
    return status === 3 || status === 4 ? enterpriseInfo.value.name || '未备案' : '未备案';
});

const isRegistered = computed(() => {
    return enterpriseInfo.value?.status === 3 || enterpriseInfo.value?.status === 4;
});

// Methods
const handleNavigation = (path) => {
    router.push(path);
};

const loadUsername = () => {
    username.value = localStorage.getItem('username') || '未登录';
};

const fetchEnterpriseInfo = async () => {
    loading.value = true;
    try {
        const response = await apiClient.get('/account/getEnterpriseInfo');
        if (response.data?.code === 200) {
            enterpriseInfo.value = response.data.data;
            localStorage.setItem('enterpriseInfo', JSON.stringify(response.data.data));
        }
    } catch (error) {
        if (error.response?.status === 401) {
            localStorage.clear();
            router.push('/login');
        } else {
            const cached = localStorage.getItem('enterpriseInfo');
            if (cached) enterpriseInfo.value = JSON.parse(cached);
        }
    } finally {
        loading.value = false;
    }
};

const handleLogout = async () => {
    try {
        await ElMessageBox.confirm('您确定要退出当前账号吗？', '退出提醒', {
            confirmButtonText: '确认退出',
            cancelButtonText: '取消',
            type: 'warning',
            customClass: 'app-logout-confirm-box',
            center: true,
            showClose: false,
            closeOnClickModal: false,
            draggable: true,
        });
        try {
            await apiClient.post('/account/logout');
        } catch (e) {
            /* ignore */
        }
        localStorage.clear();
        ElMessage.success('已安全退出');
        router.push('/login');
    } catch (e) {
        /* cancelled */
    }
};

onMounted(() => {
    loadUsername();
    fetchEnterpriseInfo();
});
</script>

<style scoped lang="scss">
// Variables
$primary-color: #5b5ef7;
$primary-gradient-start: #5b5ef7;
$primary-gradient-end: #7c7eff;
$bg-color: #f9f9fc;
$sidebar-bg: rgba(255, 255, 255, 0.7);
$text-main: #1e293b;
$text-muted: #94a3b8;
$transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

// Animations
@keyframes slideUpFade {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.animate-enter {
    animation: slideUpFade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
}

.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

// Background Decoration
.background-decoration {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;

    .blob {
        position: absolute;
        border-radius: 50%;
        filter: blur(120px);
        opacity: 0.2;
        animation: pulse 8s infinite ease-in-out;
    }

    .blob-1 {
        top: -10%;
        left: -10%;
        width: 40%;
        height: 40%;
        background: #5b5ef7;
        animation-duration: 8s;
    }

    .blob-2 {
        bottom: -10%;
        right: -10%;
        width: 40%;
        height: 40%;
        background: #8b5cf6;
        animation-duration: 10s;
    }
}

.sidebar-spacer {
    width: 280px;
    flex-shrink: 0;
    height: 100vh;
}

.app-sidebar {
    position: fixed; // Or static depending on layout
    height: 100vh;
    width: 280px;
    display: flex;
    flex-direction: column;
    background: $sidebar-bg;
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px);
    border-right: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 4px 0 24px rgba(91, 94, 247, 0.04);
    z-index: 40;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

// Header
.sidebar-header {
    padding: 24px 24px 8px;
}

.logo-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.5));
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    transition: $transition-smooth;
    cursor: default;

    &:hover {
        box-shadow: 0 10px 25px -5px rgba(91, 94, 247, 0.15);
        transform: translateY(-2px);
        border-color: rgba(91, 94, 247, 0.2);
    }
}

.logo-content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.logo-text {
    display: flex;
    flex-direction: column;

    .app-name {
        font-size: 18px;
        font-weight: 700;
        color: $text-main;
        line-height: 1.2;
        transition: color 0.3s;
    }

    .app-edition {
        font-size: 11px;
        color: $text-muted;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-top: 2px;
    }
}

.logo-card:hover .app-name {
    color: $primary-color;
}

.status-badge {
    display: flex;
    align-items: center;
    gap: 8px;

    .badge-tag {
        padding: 4px 10px;
        border-radius: 6px;
        background: #f0f1ff;
        color: $primary-color;
        font-size: 12px;
        font-weight: 700;
        border: 1px solid rgba(91, 94, 247, 0.1);
    }

    .status-dot {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: #22c55e;
        box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
        animation: pulse 2s infinite;
    }

    .status-text {
        font-size: 12px;
        color: $text-muted;
    }
}

// Navigation
.sidebar-nav {
    flex: 1;
    padding: 24px 16px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;

    &::-webkit-scrollbar {
        width: 4px;
    }

    &::-webkit-scrollbar-thumb {
        background: rgba(0, 0, 0, 0.1);
        border-radius: 4px;
    }
}

.nav-item {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: none;
    background: transparent;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.1s;

    &:active {
        transform: scale(0.96);
    }
}

.nav-bg-active {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, $primary-gradient-start, $primary-gradient-end);
    opacity: 0;
    transition: opacity 0.5s ease-out;
}

.nav-bg-hover {
    position: absolute;
    inset: 0;
    background: rgba(238, 242, 255, 0.6); // indigo-50/60
    opacity: 0;
    transition: opacity 0.3s ease;
}

.nav-content {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    transition: $transition-smooth;

    &.translate-x {
        transform: translateX(4px);
    }
}

.nav-icon {
    color: $text-muted;
    transition: color 0.3s;

    &.text-white {
        color: white;
    }
}

.nav-item:hover .nav-icon:not(.text-white) {
    color: $primary-color;
}

.nav-label {
    font-size: 14px;
    font-weight: 500;
    color: #64748b; // slate-500
    transition: color 0.3s;

    &.text-white {
        color: white;
    }
}

.nav-item:hover .nav-label:not(.text-white) {
    color: $text-main;
}

.active-dot {
    position: absolute;
    right: 12px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.6);
    z-index: 10;
    transform: scale(0);
    opacity: 0;
    transition: $transition-smooth;

    &.show {
        transform: scale(1);
        opacity: 1;
    }
}

.active-glow {
    position: absolute;
    inset: 0;
    border-radius: 12px;
    box-shadow: 0 10px 20px rgba(91, 94, 247, 0.2);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s;

    &.show {
        opacity: 1;
    }
}

.opacity-100 {
    opacity: 1;
}

// Footer / User Profile
.sidebar-footer {
    padding: 16px;
    margin-top: auto;
}

.user-card {
    position: relative;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: $transition-smooth;
    overflow: hidden;

    &:hover {
        background: rgba(255, 255, 255, 0.8);
        box-shadow: 0 10px 30px -10px rgba(91, 94, 247, 0.2);
        transform: translateY(-4px);
    }
}

.user-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;

    .section-title {
        font-size: 12px;
        font-weight: 600;
        color: $text-muted;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }
}

.logout-btn {
    padding: 6px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: $text-muted;
    cursor: pointer;
    transition: all 0.2s;

    &:hover {
        color: #ef4444; // red-500
        background: #fef2f2; // red-50
    }

    &:active {
        transform: scale(0.9) rotate(12deg);
    }
}

.user-info {
    .username {
        font-size: 14px;
        font-weight: 700;
        color: #334155;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        transition: color 0.3s;
    }

    .enterprise-info {
        display: flex;
        align-items: flex-start;
        gap: 6px;

        .ent-icon {
            font-size: 12px;
            color: $text-muted;
            margin-top: 3px;
        }

        .ent-name {
            font-size: 12px;
            color: #64748b;
            line-height: 1.4;
            word-break: break-all;
            transition: color 0.5s;

            &.loading {
                opacity: 0.5;
            }
        }
    }
}

.user-card:hover .username {
    color: $primary-color;
}

.user-card-glow {
    position: absolute;
    bottom: -24px;
    right: -24px;
    width: 64px;
    height: 64px;
    background: rgba(91, 94, 247, 0.1);
    border-radius: 50%;
    filter: blur(24px);
    transition: transform 1s;

    .user-card:hover & {
        transform: scale(1.5);
    }
}
</style>

<style lang="scss">
/* Global styles for the logout confirmation box to match the Indigo theme */
.app-logout-confirm-box {
    --el-messagebox-title-color: #1e293b;
    --el-messagebox-content-color: #64748b;

    border-radius: 24px !important;
    padding: 8px !important;
    border: none !important;
    box-shadow:
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    width: 360px !important;
    max-width: 90vw !important;
    background-color: #ffffff !important;

    .el-message-box__header {
        padding: 24px 24px 12px !important;

        .el-message-box__title {
            font-size: 18px;
            font-weight: 700;
            line-height: 1.4;
        }

        .el-message-box__headerbtn {
            top: 24px;
            right: 24px;
        }
    }

    .el-message-box__status {
        transform: translateY(-2px);
        font-size: 24px !important;
    }

    .el-message-box__content {
        padding: 0 24px 28px !important;
        font-size: 15px !important;
        line-height: 1.6;
    }

    .el-message-box__btns {
        padding: 0 24px 24px !important;
        display: flex;
        gap: 12px;
        /* flex-direction: row-reverse; Removed to swap buttons back to [Cancel] [Confirm] */

        .el-button {
            border-radius: 12px;
            padding: 10px 20px;
            height: 42px;
            font-size: 14px;
            font-weight: 600;
            border: none;
            flex: 1;
            margin: 0 !important;
            transition: all 0.2s ease;

            &--primary {
                background: linear-gradient(135deg, #4f46e5 0%, #6366f1 100%);
                box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);

                &:hover {
                    background: linear-gradient(135deg, #4338ca 0%, #4f46e5 100%);
                    transform: translateY(-1px);
                    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
                }

                &:active {
                    transform: translateY(0);
                }
            }

            &:not(.el-button--primary) {
                background: #f1f5f9;
                color: #64748b;

                &:hover {
                    background: #e2e8f0;
                    color: #334155;
                }

                &:active {
                    background: #cbd5e1;
                }
            }
        }
    }
}
</style>
